<template>
	<section>
		<main class="pb30 pt40 main">
			<mt-header fixed title="我的推广">
				<mt-button class="ml5" slot="left" icon="back" @click="goBack"></mt-button>
				<mt-button class="mr5" slot="right">
					<a href="/promote/myusers.html">我的用户</a>
				</mt-button>
			</mt-header>
			<img :src="require('@images-activity/yq1.png')" alt>
			<div class="share pb20 pt5 ml10 mr10 br10 bgwhite shadow">
				<h4 class="fs14 lh50">我要分享</h4>
				<div class="flex">
					<div class="flex1 tc copy" :data-clipboard-text="myCode">
						<img :src="require('@images-activity/yq2.png')" :width="50" :height="50" alt>
						<p class="mt10 fs12">复制链接</p>
					</div>
					<div class="flex1 tc" @click="popupVisible=true">
						<img :src="require('@images-activity/yq3.png')" :width="50" :height="50" alt>
						<p class="mt10 fs12">扫描二维码</p>
					</div>
				</div>
			</div>
			<img class="mt40" :src="require('@images-activity/yq4.png')" alt>

			<div class="score ml10 mr10 br10 bgwhite shadow mt30">
				<h3 class="bgorange lh35 white fs14">我的战绩</h3>
				<div class="flex fontc2 mt20">
					<div class="flex1 tc line pb10">
						<p class="fs12">已邀请的好友</p>
						<p class="fs30 orange mt20">{{account.myUsersCount||0}}</p>
					</div>
					<div class="flex1 tc pb10">
						<p class="fs12">已交易好友</p>
						<p class="fs30 red mt20">{{account.dealUsersCount||0}}</p>
					</div>
				</div>
				<div class="flex mt20 fontc2">
					<p class="flex1">
						<img :src="require('@images-activity/yq5.png')" :width="12" :height="12" alt>
						<span class="ml5">推广等级</span>
						<span class="ml5 red">{{userInfo.level}}</span>
					</p>
					<p class="flex1">
						<img :src="require('@images-activity/yq5.png')" :width="12" :height="12" alt>
						<span class="ml5">可提佣金</span>
						<span class="ml5 red">{{account.currentCom}}</span>
					</p>
				</div>
                <a class="lh50 red" href="/promote/myusers.html">查看奖励明细>></a>
			</div>

            <div class="ml10 mr10 mt30">
				<p class="lh40 tl bgwhite fs16 currentCom shadow">
					<i class="fl fontc0">可提佣金:</i>
					<span class="bold" style="color:#ff9e00;">{{account.currentCom}}元</span>
					<em class="fr white bold bgyellow" @click="getCash">提取</em>
				</p>
			</div>
			<div class="bgwhite ml10 mr10 br10 mt30 shadow">
				<h3 class="bgorange lh35 white">推广等级</h3>
				<ol class="fs14 pt10 pb10">
					<li :key="idx" v-for="(item,idx) in level">
						<img
							class="mt5"
							:src="require('@images-activity/tongpai.png')"
							width="30"
							alt
							v-show="idx==0"
						>
						<img class="mt5" :src="require('@images-activity/yinpai.png')" width="30" alt v-show="idx==1">
						<img class="mt5" :src="require('@images-activity/jinpai.png')" width="30" alt v-show="idx==2">
						<p class="lh30 yellow mt5" style="color:#ff9000">{{item.levelName}}</p>
						<p class="l30 fontc2">{{item.advertisement}}</p>
					</li>
				</ol>
			</div>

			<img class="mt30" :src="require('@images-activity/yq7.png')" alt>
			<mt-popup class="br10" v-model="popupVisible">
				<div class="qrcode pb20">
					<img class="" :src="QRCodeImg" width="300" alt>
					<p class="fs14 pl10 pr10">请扫一扫，或者截图保存二维码图片,发送给好友</p>
				</div>
			</mt-popup>
		</main>
		<!-- 
			<div class=" fs14 lh40 ml20 mr20">
				<div class="clearfix portrait">
					<img class="fl ml5 head" onerror="this.src='./static/imgs/man.png'" :src="userInfo.userPortrait" width="30" height="30"
					 alt="" v-show="userInfo.userPortrait">
					<span class="fl" v-show="!userInfo.userPortrait">
						<img class="fl ml5 head" width="30" height="30" :src="imgMan">
					</span>
					<span class="fl ml5 white">{{userInfo.userName}}</span>
					<em class="fl line"></em>
					<span class="fl ml5 mt10 lh20" style="color:#ffde00">
						<img :src="img10" height="15" alt="level" v-show="userInfo.level==='铜牌推广员'">
						<img :src="img11" height="15" alt="level" v-show="userInfo.level==='银牌推广员'">
						<img :src="img12" height="15" alt="level" v-show="userInfo.level==='金牌推广员'">
						{{userInfo.level}}
					</span>
				</div>
			</div>

			<div class="ml20 mr20 mt15">
				<p class="lh40 tl bgwhite fs16 currentCom shadow">
					<i class="fl fontc0">可提佣金:</i>
					<span class="bold" style="color:#ff9e00;">{{account.currentCom}}元</span>
					<em class="fr white bold bgyellow" @click="getCash">提取</em>
				</p>
			</div>
			<h3 class="lh50 mt20 fs18 white">
				邀请好友，我赚的盘满钵满
			</h3>
			<div class="ml20 mr20 list bgwhite shadowin">
				<div>
					<h4 class="pr lh45">
						<div class="fs16" style="color:#bb4f00;">
							<span class="pr5">财主排名</span>
							<span class="pl5">交易手数</span>
						</div>
					</h4>
					<ul class="lh40 fs16">
						<li :key="idx" v-for="(item,idx) in myUser">
							<span class="fontc3">{{item.userName}}</span>
							<span class="red">{{item.totalHandsNum}}手</span>
						</li>
						<li class="mb20 fontc3" v-show="myUser.length<=0">
							暂无邀请的好友
						</li>
					</ul>
				</div>
			</div>
			<p class="lh50 fs16 white">共有<span class="yellow">{{account.myUsersCount||0}}</span>位受邀好友，其中<span class="yellow">{{account.dealUsersCount||0}}</span>位已投资</p>
			<div class="code ml20 mr20 shadow mt10">
				<h4 class="lh45 fs18 white">推广链接</h4>
				<p class="lh20 tl shadow" id="cardNo">
					<em class="fs12 white">{{myCode}}</em>
					<span class="fs14 copy bgwhite" :data-clipboard-text="myCode" style="color:#e96a59">复制</span>
				</p>
				<div class="lh20 mt15 fs16 white">我的推广码:<span class="white bold ml5">{{tuiGuangCode}}</span></div>
				<div class="qrcode">
					<img class="mt15" :src="QRCodeImg" width="240" alt="">
					<h6 class="fs14 mt20 mb10 white">截图保存二维码图片,发送给好友</h6>
				</div>
			</div>
		-->
		<!-- 
		<section class="detail pl20 pr20 pt40 pb50">
			<div class="bgwhite shadowin pb10">
				<h3 style="background-image:url('/static/imgs-activity/title.png')">
					推广流程
				</h3>
				<div class="wrap pt50">
					<img :src="imgL1" width="50" height="50" alt="">
					<img :src="imgL5" width="" height="14" alt="">
					<img :src="imgL2" width="50" height="50" alt="">
					<img :src="imgL5" width="" height="14" alt="">
					<img :src="imgL3" width="50" height="50" alt="">
					<img :src="imgL5" width="" height="14" alt="">
					<img :src="imgL4" width="50" height="50" alt="">
				</div>
				<p class="tc lh50 fs14 flex">
					<span class="flex1 ml10">1.发送链接</span>
					<span class="flex1">2.好友注册</span>
					<span class="flex1">3.进行交易</span>
					<span class="flex1 mr10">4.收取佣金</span>
				</p>
				<img class="bg" :src="imgBg" width="" height="30" alt="">
			</div>
			<div class="bgwhite shadowin">
				<h3 style="background-image:url('/static/imgs-activity/title.png')">
					收益计算
				</h3>
				<div class="pt30">
					<p class="fs14 lh50">
						<span class="fontc1">挣钱公式</span>
						<span class="red">好友交易手续费 × 佣金比例 = 佣金</span>
					</p>
					<img :src="imgChart" width="81%" alt="">
					<p class="fs14 lh50">
						<span class="fontc1">以推广一个好友交易一手的佣金为*元为例</span>
					</p>
				</div>
				<img class="bg" :src="imgBg" width="" height="30" alt="">
			</div>
		</section>
		-->
	</section>
</template>
<script>
import QRCode from 'qrcode'
import ClipboardJS from 'clipboard'
import { Popup } from 'mint-ui'
export default {
	name: 'TuiGuang',
	data() {
		return {
			popupVisible: false,

			userInfo: {},
			account: {},
			level: {},
			myUser: [],
			myCode: '',
			tuiGuangCode: '',
			QRCodeImg: ''
		}
	},
	created() {
		this.init()
	},
	mounted() {
		var clipboard = new ClipboardJS(document.querySelectorAll('.copy'))
		clipboard.on('success', function(e) {
			Toast('推广链接已复制')
		})
		clipboard.on('error', function(e) {
			console.log(e)
		})
	},
	methods: {
		init() {
			function findUserInfo() {
				return axios.get('/user/user/findUserInfo.do')
			}
			function getLevelsForUser() {
				return axios.get('/user/user/getLevelsForUser.do')
			}
			function findPromoterCode() {
				return axios.get('/user/user/findPromoterCode.do')
			}
			function findPromoterLevel() {
				return axios.get('/user/user/findPromoterLevel.do')
			}
			function getCurrentCom() {
				return axios.get('/order/promoter/getCurrentCom.do')
			}
			// qureypagingSonUser

			function qureypagingSonUser() {
				return axios.post('/user/user/qureypagingSonUser.do', {
					firstName: 'Fred',
					lastName: 'Flintstone'
				})
			}

			axios.all([findUserInfo(), getLevelsForUser(), findPromoterCode(), findPromoterLevel(), getCurrentCom(), qureypagingSonUser()]).then(
				axios.spread((findUserInfo, getLevelsForUser, findPromoterCode, findPromoterLevel, getCurrentCom, qureypagingSonUser) => {
					findUserInfo = findUserInfo.data
					getLevelsForUser = getLevelsForUser.data
					findPromoterCode = findPromoterCode.data
					findPromoterLevel = findPromoterLevel.data
					getCurrentCom = getCurrentCom.data
					qureypagingSonUser = qureypagingSonUser.data

					if (findUserInfo.code === 503 || getLevelsForUser.code === 503 || findPromoterCode.code === 503 || findPromoterLevel.code === 503 || getCurrentCom.code === 503 || qureypagingSonUser.code === 503) {
						this.$router.push({
							path: '/login'
						})
					} else {
						findUserInfo.data.level = findPromoterLevel.data

						this.userInfo = findUserInfo.data
						this.account = getCurrentCom.data
						this.level = getLevelsForUser.data
						this.myUser = qureypagingSonUser.data.data

						// this.myCode   = 'http://www.zcmqh.me?abc='+findPromoterCode.data+'&href='+window.location.origin;
						this.myCode = window.location.origin + '/#/activity/tuiguangreg?abc=' + findPromoterCode.data
						this.tuiGuangCode = findPromoterCode.data
						QRCode.toDataURL(this.myCode)
							.then(url => {
								this.QRCodeImg = url
							})
							.catch(err => {
								console.error(err)
							})
					}
				})
			)
		},
		getCash() {
			if (this.account.currentCom <= 0) {
				Toast('您没有可提的佣金')
				return
			} else {
				MessageBox.confirm('您的佣金账户余额为：' + this.account.currentCom + '元，确定转入余额账户吗？', '佣金提现').then(() => {
					Indicator.open()
					axios({
						methods: 'get',
						url: '/user/finance/withdrawCommission.do',
						params: {
							money: this.account.currentCom
						}
					}).then(res => {
						Indicator.close()
						res = res.data
						if (res.code == 200) {
							MessageBox(' ', res.msg)
							this.init()
						} else if (res.code == 503) {
							this.$router.push({
								path: '/login'
							})
						} else {
							Toast(res.msg)
						}
					})
				})
			}
		},
		goBack() {
			this.$router.push('/mine')
		}
	}
}
</script>
<style scoped lang='scss'>
main {
	background-color: #dd4539;
}
.bgorange {
	background-color: #ff8800;
}
.bgred {
	background-color: #dd4539;
}
.orange {
	color: #ff8800;
}
.red {
	color: #dd4539;
}
.line {
	border-right: 1px dotted #999;
}
.portrait img {
	border-radius: rem(20px);
}

.portrait img.head {
	margin-top: rem(5px);
}

.portrait .line {
	width: 1px;
	height: rem(12px);
	background-color: #fba500;
	margin-left: rem(7px);
	margin-top: rem(14px);
}

.currentCom {
	border-radius: rem(5px);
	overflow: hidden;
}

.currentCom em {
	width: rem(80px);
	text-align: center;
}

.currentCom i {
	text-align: center;
}

.list {
	border-radius: rem(10px);
}

ol {
	display: flex;
	justify-content: space-around;
	border-radius: rem(5px);
}

ol li {
	width: 30%;
	padding: rem(10px);
}

.list {
	border-radius: rem(8px);
	overflow: hidden;
	padding-top: rem(10px);
	padding-bottom: rem(10px);
}

.list > div {
	border-radius: rem(5px);
	overflow: hidden;
}

.list h4 div {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.list h4 span {
	width: 50%;
}

.list h4 img {
	position: absolute;
	left: 0;
}

.list li {
	display: flex;
	justify-content: space-around;
}

.list li span {
	width: 50%;
}

.code {
	border-radius: rem(8px);
	overflow: hidden;
	padding: 0 rem(10px) rem(10px) rem(10px);
	background-color: #ffba00;
}

.code h4 {
	border-bottom-left-radius: rem(30px);
	border-bottom-right-radius: rem(30px);
	background-color: #ea604d;
	box-shadow: 0 0 rem(5px) rgba(0, 0, 0, 0.2) inset, 0 0 rem(5px) rgba(0, 0, 0, 0.3);
}

.code p {
	border-radius: rem(4px);
	border: rem(5px) solid #ea604d;
	display: flex;
	background-color: #ea604d;
	width: rem(240px);
	margin-left: auto;
	margin-right: auto;
	margin-top: rem(20px);
}

.code p em {
	word-break: break-all;
}

.code p span {
	min-width: rem(40px);
	height: rem(30px);
	line-height: rem(30px);
	text-align: center;
	margin-top: rem(5px);
	border-radius: rem(3px);
	margin-left: rem(10px);
	margin-right: rem(5px);
	box-shadow: 0 rem(1px) rem(1px) rgba(80, 16, 16, 0.5);
}

.shadow {
	box-shadow: 0 0 rem(5px) rgba(0, 0, 0, 0.3);
}

.shadowin {
	box-shadow: 0 0 rem(15px) #fa8272 inset, 0 0 rem(5px) rgba(0, 0, 0, 0.3);
}

.detail {
	margin-top: rem(-1px);
	background: linear-gradient(180deg, #fa5d50, #a512fa);
}

.detail h3 {
	line-height: rem(50px);
	width: 100%;
	height: rem(50px);
	background-position: center center;
	background-size: auto rem(50px);
	background-repeat: no-repeat;
	font-size: rem(16px);
	color: #ca1001;
	position: absolute;
	left: 0;
	top: rem(-25px);
}

.detail .bg {
	position: absolute;
	bottom: rem(-30px);
	left: 50%;
	transform: translateX(-50%);
}

.detail > div {
	border-radius: rem(8px);
	position: relative;
	margin-bottom: rem(60px);
}

.mint-button{
    background-color: #fff;
}
</style>